<template>
    <el-card>
        <div slot="header">
            <icon class-name="icontubiaozhizuomoban" color='#1296db'></icon>
            <span>出售中的商品</span>
        </div>
        <!-- 搜索 -->
        <section class="goods-tabs-box _display_flex">
            <div>
                <el-input placeholder="请输入商品名称" v-model="title" class="goods-tabs-input"></el-input>
                <el-select class="goods-tabs-input" v-model="brand_id" placeholder="请选择商品品牌">
                    <el-option
                        v-for="item in brandOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-cascader
                    class="goods-tabs-input"
                    v-model="category_id"
                    :props="categoryProps"
                    :options="categoryOption"></el-cascader>
                <el-button type="primary" @click="getGoodsList">搜索</el-button>
                <el-button type="info" @click="resetSearch">重置</el-button>
            </div>
            <div>
                <el-button type="success" @click="add" >发布商品</el-button>
            </div>
        </section>
        <!-- 商品 -->
        <!-- <el-table :data="tableData" tooltip-effect="dark" border class="goods-table-box">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="id" label="id" width="50"></el-table-column>
            <el-table-column prop="title" label="商品名称" :show-overflow-tooltip="true" min-width="200"></el-table-column>
            <el-table-column prop="serial_number" label="商品编号" :show-overflow-tooltip="true" width="150" ></el-table-column>
            <el-table-column prop="img" label="缩略图" width="130">
                <template slot-scope="scope">
                    <img :src="path + scope.row.img" class="goods-table-img" >
                </template>
            </el-table-column>
            <el-table-column prop="category" label="分类" width="150">
                <template slot-scope="scope">{{scope.row.category_name}}</template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌" width="100">
                <template slot-scope="scope">{{scope.row.brand.name}}</template>
            </el-table-column>
            <el-table-column prop="sales_price" label="销售价" width="100"></el-table-column>
            <el-table-column prop="price" label="活动价" width="100"></el-table-column>
            <el-table-column prop="inventory" label="库存" width="100"></el-table-column>
            <el-table-column prop="new" :formatter="newformatter" label="新品" width="100"></el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="100"></el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" plain @click="compile(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" plain @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table> -->
        <Table></Table>
        <!-- 分页 -->
        <div class="goods-page _display_flex">
            <el-pagination background layout="prev, pager, next" @current-change="currentChange" :current-page="page" :page-size="rows" :total="total" ></el-pagination>
            <el-tag type="success">总共{{total}}条</el-tag>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'GoodsList',
    title: '商品列表',
    methods: {
        // 重置
        resetSearch(){
            this.title = ''
            this.brand_id = ''
            this.category_id = ''
        },
        // 新增
        add() {
            this.$router.push({
                path: '/goods/add'
            })
        },
        // 编辑
        compile(id) {
            this.$router.push({
                path: `/goods/compile/${id}`
            })
        },
        // 页码
        currentChange(event) {
            this.page = event
            this.getGoodsList()
        },
        // 商品列表
        async getGoodsList() {
            let data = {
                title: this.title,
                page: this.page,
                brand_id: this.brand_id,
                category_id: this.category_id,
                rows: this.rows
            }
            let res = await this.$Http.getGoodsList({ data })
            if(res) {
                this.tableData = res.rows
                console.log(this.tableData)
                this.total = res.count
                this.brandOption = res.brand_list.map(v => {
                    return {
                        label: v.name,
                        value: v.id
                    }
                })
                this.categoryOption = res.category_list
            }
        },
        // 删除
        del(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.getGoodsDel(id)
            }).catch(() => {});
        },
        // 删除接口
        async getGoodsDel(id) {
            let data = { id}
            let res = await this.$Http.getGoodsDel({ data })
            if(res){
                this.tableData = this.tableData.filter(v => v.id !=id )
            }
            
        }
    },
    provide() {
        return {
            tableData: this.tableData
        }
    },
    data() {
        return {
            tableData: [],
            newformatter: (row) => {
                return row.new? '是' : '否'
            },
            title: '',
            brand_id: '',
            brandOption: [],
            category_id: '',
            categoryOption: [],
            categoryProps: {
                value: 'id',
                label: 'name',
            },
            page: 1,
            rows: 10,
            total: 0
        }
    },
    mounted() {
        // 商品列表
        this.getGoodsList()
    }
}
</script>

<style lang="scss" scoped>
    .goods-list-bar{
        background: $bg-color;
    }
    .goods-tabs-box{
        justify-content: space-between;
        .goods-tabs-input{
            width: 150px;
            margin-right: 20px;
        }
    }
    .goods-table-box{
        width: 100%;
        margin: 20px 0;
        .goods-table-img{
            width: 108px;
            height: 108px;
        }
    }
    .goods-page{
        width: 100%;
        justify-content: space-between;
    }
</style>